/* Start custom button CSS here
    ---------------------------------------- */
.wgtButton2 {
	display: inline-block;
	background: none;
	margin: 0px 2px 0px 0px;
	padding: 3px 0;
	border-width: 0;
	overflow: visible;
	font: 100%/ 1.2 Arial, Sans-serif;
	text-decoration: none;
	color: #333;
}

* html button.wgtButton2 {
	padding-bottom: 1px;
}

.wgtButton2-l {
	margin: 0;
}

.wgtButton2-c {
	margin: 0;
}

/* Immediately below is a temporary hack to serve the 
       following margin values only to Gecko browsers
       Gecko browsers add an extra 3px of left/right 
       padding to button elements which can't be overriden.
       Thus, we use -3px of left/right margin to overcome this. */
html:not ([lang *=""] ) button.wgtButton2 {
	margin: 0px -1px 0px -3px;
}

html:not ([lang *=""] ) button.wgtButton2-l {
	margin: 0 -3px 0 -3px;
}

html:not ([lang *=""] ) button.wgtButton2-c {
	margin: 0 -3px;
}

.wgtButton2 span {
	background: #ddd url(../images/wgt/bg-button.gif) repeat-x 0 0;
	margin: 0;
	padding: 3px 0;
	border-left: 1px solid #bbb;
	border-right: 1px solid #aaa;
}

.wgtButton2 span.disabled {
	color: #ccc;
	background: #eee;
}

* html .wgtButton2 span {
	padding-top: 0;
}

.wgtButton2 span span {
	position: relative;
	padding: 3px .4em;
	border-width: 0;
	border-top: 1px solid #bbb;
	border-bottom: 1px solid #aaa;
}

.wgtButton2 span span img {
	vertical-align: middle;
}

.wgtButton2 .text {
	display: inline;
}

/* pill classes only needed if using pill style buttons ( LEFT | CENTER | RIGHT ) */
.wgtButton2-l span {
	border-right-width: 0;
}

.wgtButton2-l span span {
	border-right: 1px solid #bbb;
}

.wgtButton2-c span {
	border-right-style: none;
	border-left-color: #fff;
}

.wgtButton2-c span span {
	border-right: 1px solid #bbb;
}

.wgtButton2-r span {
	border-left-color: #fff;
}

/* only needed if implementing separate hover/focus/active state for buttons */
.wgtButton2:hover span,.wgtButton2:hover span span,.wgtButton2:focus span,.wgtButton2:focus span span
	{
	cursor: pointer; /* important for any clickable/pressable element */
	border-color: #fc9 !important;
	color: #000;
}

.wgtButton2:hover span.disabled,.wgtButton2:hover span.disabled span.disabled,.wgtButton2:hover span.disabled span.disabled span,.wgtButton2:focus span.disabled,.wgtButton2:focus span.disabled span.disabled
	{
	cursor: default; /* important for any clickable/pressable element */
	color: #ccc;
}

.wgtButton2:active span {
	background-position: 0 -400px;
	outline: none;
}

.wgtButton2:focus,.wgtButton2:active {
	outline: none;
	/* doesn't seem to be respected for <button>, only <a> */
}

/* use if one button should be the 'primary' button */
.wgtButton2-primary {
	font-weight: bold;
	color: #000;
}

.wgtIconButton {
	margin: 5px;
}

.wgtIconButton3D {
	padding: 1px;
	margin: 0px;
	border-width: 1px;
	border-style: solid;
	border-color: white;
}

.wgtIconButton3D_over {
	border-color: #dddddd #8D5A22 #8D5A22 #dddddd;
	border-style: outset;
}

.wgtButtonLink3D {
	padding: 1px;
	margin: 0px;
	border-width: 1px;
	border-style: solid;
	border-color: white;
}

.wgtButtonLink3D_over {
	border-color: #dddddd #8D5A22 #8D5A22 #dddddd;
	border-style: solid;
}
.selectedButton span {
    background: #ddd url(../images/wgt/bg-button-selected.gif) repeat-x 0 0;
}